<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户后台管理左侧部分</title>
<?php include_once("inc.php");?>
</head>
<style>
*,body{
	margin: 0;
	padding: 0;
	background-color: #616975;
}
.box{
	width: 220px;
	height: 300px;
	display: flex;
	position: absolute;
}
.ulList{
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: grey;
	position: absolute;
	list-style: none;
}
.liList{
	width: 100%;
	line-height:36px;
	display: flex;
	flex-direction: column;
	background-color: #616975;
	position: relative;
	border-bottom: 1px solid #33373d;
}
.liList p{
	font-size: 13px;
	font-weight:600;
	color: white;
}
.liList p img{
	margin-left:10px;
	margin-right:10px;
}
.liList ul{
	width: 100%;
	position: relative;
}
.liList a{
	text-decoration:none;
}
.liList ul li{
	width: 100%;
	height: 33px;
	line-height: 33px;
	background-color: #fff;
	list-style: none;
	position: relative;
	font-size: 12px;
}
.liList ul li img{
	margin-left:10px;
	margin-right:10px;
	background-color: white;
}
.liList ul li a{
	text-decoration: none;
	background-color: white;
	color: #878D95;
}
.liList ul li a:hover{
	color: black;
}
/* .liList p:hover{
	background-color: #35afe3;
} */
/* .liList p img:hover{
	background-color: #35afe3;
} */
</style>
<script>
	function menu_active(ulId){
		if(ulId.style.display == "none"){
			ulId.style.display = "block"
		}else{
			ulId.style.display = "none"
		}
	}
</script>
<body>
<div class="box">
	<ul class="ulList">
		<li class="liList">
			<a href="#">
				<p onclick="menu_active(ulOne)">
					<img src="./images/users.png" style="vertical-align: middle;">个人设置
				</p>
			</a>
			<ul class="childUl" id="ulOne" style="display: none;">
				<li>
					<a href="password.php" target='main'><img src="./images/next.png" style="vertical-align: middle;">修改密码</a>
				</li>
				<li>
					<a href="user_edit.php" target='main'><img src="./images/next.png" style="vertical-align: middle;">个人管理</a>
				</li>
				<li>
					<a href="address_list.php" target='main'><img src="./images/next.png" style="vertical-align: middle;">收货地址管理</a>
				</li>
        	</ul>
		</li>
		<li class="liList">
			<a href="#">
				<p onclick="menu_active(ulTwo)">
					<img src="./images/goods.png" style="vertical-align: middle;">商品管理
				</p>
			</a>
			<ul class="childUl" id="ulTwo" style="display: none;">
				<li>
					<a href="goods_list.php" target='main'><img src="./images/next.png" style="vertical-align: middle;">商品管理</a>
				</li>
        	</ul>
		</li>
		<li class="liList">
			<a href="#">
				<p onclick="menu_active(ulThree)">
					<img src="./images/orders.png" style="vertical-align: middle;">购买订单
				</p>
			</a>
			<ul class="childUl" id="ulThree" style="display: none;">
				<li>
					<a href="orders_list.php" target='main'><img src="./images/next.png" style="vertical-align: middle;">购买订单</a>
				</li>
        	</ul>
		</li>
		<li class="liList">
			<a href="#">
				<p onclick="menu_active(ulFour)">
					<img src="./images/sale.png" style="vertical-align: middle;">销售订单
				</p>
			</a>
			<ul class="childUl" id="ulFour" style="display: none;">
				<li>
					<a href="ordersta_list.php" target='main'>
						<img src="./images/next.png" style="vertical-align: middle;">销售订单
					</a>
				</li>
        	</ul>
        </li>
		<li class="liList">
			<a href="#">
				<p onclick="menu_active(ulFive)">
					<img src="./images/collect.png" style="vertical-align: middle;">我的收藏
				</p>
			</a>
			<ul class="childUl" id="ulFive" style="display: none;">
				<li>
					<a href="collect_list.php" target='main'>
						<img src="./images/next.png" style="vertical-align: middle;">我的收藏
					</a>
				</li>
			</ul>
		</li>
    </ul>
</div>
</body>
</html>